<template>
  <div>
    <el-carousel :interval="4000" type="card" height="360px">
      <el-carousel-item v-for="item in sliders" :key="item._id" >
        <img :src="item.url" style="width:100%;height:100%" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import * as types from "../store/action-types";
export default {
  name: 'home',
  computed: {
    ...mapState(["sliders"])
  },
  methods: {//调用这个轮播的方法
    ...mapActions([types.SET_SLIDERS])
  },
  mounted() {//页面初始化时进行调用
    if (!this.sliders.length) {
      this[types.SET_SLIDERS]();
    }
  }
};
</script>
<style></style>
